<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入JS库 -->
    <script src="./js/axios.min.js"></script>
    <script>
      // axios 库会在全局对象 window 上定义一个 名字叫做 axios 的工具
      console.log(window.axios);
      console.log(axios);

      function loadBooks() {
        // 通过配置发送任意的类型请求
        //    + axios任何一个异步请求方法都必然返回一个等待状态改变的Promise对象
        //      => 请求成功 状态变为 fulfilled
        //      => 请求失败 状态变为 rejected
        let p = axios.request({
          // `url` 是用于请求的服务器 URL
          url: "http://139.196.82.122:3000/books",
          // `method` 是创建请求时使用的方法
          method: "get", // 默认值
        });

        console.log(p);
        p.then(function (response) {
          // 成功
          //    response 参数异步请求成功后的信息，包含服务器响应对象
          console.log(response);
          console.log(response.data);
          // 基于数据生成DOM元素，写入页面
        }).catch(function (error) {
          // 失败
          console.log(error);
        });
      }

      async function loadBooks2() {
        try {
          let { data } = await axios.request({
            // `url` 是用于请求的服务器 URL
            url: "http://139.196.82.122:3000/books",
            // `method` 是创建请求时使用的方法
            method: "get", // 默认值
          });
          console.log(data);
          // 基于数据生成DOM元素，写入页面
        } catch (error) {
          console.log(error);
        }
      }
    </script>
  </head>
  <body>
    <input type="button" value="加载小说信息" onclick="loadBooks()" />
    <br />
    <input type="button" value="加载小说信息" onclick="loadBooks2()" />
  </body>
</html>
